<template>
    <el-form :model="pre" :rules="rules" ref="user">
        <el-form-item label="username" prop="name"> <!--prop和变量名一致-->
            <el-input maxlength="10" show-word-limit v-model="pre.name">
                <template slot="append"><i class="el-icon-user"></i></template>
            </el-input>
        </el-form-item>
        <el-form-item label="phone" prop="phone">
            <el-input maxlength="11" show-word-limit v-model="pre.phone">
                <template slot="append"><i class="el-icon-mobile-phone"></i></template>
            </el-input>
        </el-form-item>
        <el-form-item label="Email" prop="email">
            <el-input v-model="pre.email">
                <template slot="append"><i class="el-icon-chat-dot-square"></i></template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="submit" type="primary">Update</el-button>
            <el-button @click="reset" circle icon="el-icon-refresh-left"
                       style="background-color: #F2F6FC"></el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import {updateUserInfo} from "../../../store/user";
import {setUser} from "../../../store/session";

export default {
    data() {
        return {
            checked: true,
            pre: null,
            rules: {
                name: [
                    {pattern: /^[A-Za-z]+$/, message: "纯英文用户名", trigger: "blur"},
                    {min: 3, max: 20, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                email: [
                    {
                        pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        message: "邮箱格式错误,只允许英文字母、数字、下划线、英文句号、以及中划线组成",
                        trigger: "blur"
                    },
                ],
                phone: [{
                    pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                    message: "手机格式错误",
                    trigger: "blur"
                }]
            }
        }
    },
    props: {
        user: {
            type: Object,
            default: () => {
                return {
                    name: '',
                    email: '',
                    phone: ''
                }
            }
        }
    },
    methods: {
        submit() {
            this.$refs['user'].validate((valid) => {
                if (valid) {
                    if (this.pre.name === null || this.pre.name.length < 3)
                        return;
                    if (this.pre.email != null && this.pre.email.length === 0)
                        this.pre.email = null;
                    if (this.pre.phone != null && this.pre.phone.length === 0)
                        this.pre.phone = null;
                    updateUserInfo(this.pre).then(rs => {
                        if (rs.code === 200)
                            setUser(rs.data); //更新信息
                        this.$message({
                            message: rs.message,
                            type: rs.code === 200 ? 'success' : 'error',
                            duration: 5 * 1000
                        })
                        window.location.reload();
                    })
                }
            });
        },
        reset() {
            this.$refs['user'].resetFields();
        }
    },
    created() { /*如果是mounted会因为pre没有加载，而表单的数据读取null*/
        this.pre = JSON.parse(JSON.stringify(this.user));
        /*如果不改为null，会被更新,而此时pre的这两个属性未必是最新的*/
        this.pre.avatar = null;
        this.pre.password = null;
    }
}
</script>
